<template>
	<view class="container">
		<view class="storeList">
			<view class="search"><u-search :showAction="false" placeholder="请输入商家名称" v-model="keyword"></u-search></view>
			<view class="filter" style="">
				<view>
					<view class="filter-item" @click="onDistanceShow">
						<text v-if="!distance_name">全部</text>
						<text v-if="distance_name">{{ distance_name }}</text>
						<image src="../../static/arrow-bottom.png" mode=""></image>
					</view>
					<view class="filter-item" @click="onTypeShow">
						<text v-if="!type_name">类型</text>
						<text v-if="type_name">{{ type_name }}</text>
						<image src="../../static/arrow-bottom.png" mode=""></image>
					</view>
					<view class="filter-item" @click="onOrderShow">
						<text v-if="!order_name">按距离排序</text>
						<text v-if="order_name">{{ order_name }}</text>
						<image src="../../static/arrow-bottom.png" mode=""></image>
					</view>
				</view>
			</view>

			<view v-show="distanceShow" class="tui-dropdownlist" style="">
				<view class="tui-dropdownlist-item tui-icon-middle" style="margin-bottom: 20rpx;">
					<text @click="doDistance(0, 0, '全部')" class="tui-ml tui-middle">全部</text>
					<text @click="doDistance(0, 100, '100km以下')" class="tui-ml tui-middle">100km以下</text>
					<text @click="doDistance(100, 500, '100-500km')" class="tui-ml tui-middle">100-500km</text>
					<text @click="doDistance(500, 1000, '500-1000km')" class="tui-ml tui-middle">500-1000km</text>
					<text @click="doDistance(1000, 0, '1000km以上')" class="tui-ml tui-middle">1000km以上</text>
				</view>
			</view>
			<view v-show="typeShow" class="tui-dropdownlist" style="">
				<view class="tui-dropdownlist-item tui-icon-middle" style="margin-bottom: 20rpx;">
					<text @click="doCategory('', '')" class="tui-ml tui-middle">全部</text>
					<text @click="doCategory(item.id, item.title)" class="tui-ml tui-middle" v-for="item in storecateList">{{ item.title }}</text>
				</view>
			</view>
			<view v-show="orderShow" class="tui-dropdownlist" style="">
				<view class="tui-dropdownlist-item tui-icon-middle" style="margin-bottom: 20rpx;">
					<text @click="doOrder('distance', '按距离排序')" class="tui-ml tui-middle">按距离排序</text>
					<text @click="doOrder('id', '最新商家')" class="tui-ml tui-middle">最新商家</text>
				</view>
			</view>
			<!-- 
			<scroll-view class="navscroll" scroll-x="true">
				<view class="nav acea-row row-middle">
					<block v-for="(item, index) in storecateList" :key="index">
						<view :class="'item ' + (cid==item.id ? 'font-color':'')" @tap="set_where" :data-cid="item.id">
							{{item.title}}
						</view>
					</block>
				</view>
			</scroll-view> -->
			<view style="height: 140rpx;"></view>
			<view :class="'list acea-row row-between-wrapper ' + (is_switch == true ? '' : 'on')">
				<navigator
					v-for="(item, index) in storeList"
					:key="index"
					:class="'item ' + (is_switch == true ? '' : 'on')"
					hover-class="none"
					:url="'/pages/store_details/store_details?id=' + item.id"
				>
					<view :class="'pictrue ' + (is_switch == true ? '' : 'on')"><image :src="item.store_logo" :class="is_switch == true ? '' : 'on'" mode="aspectFill"></image></view>
					<view :class="'text ' + (is_switch == true ? '' : 'on')">
						<view class="name line1" style="font-size: 28rpx;color: #1B1717;">
							{{ item.title }}
							<!-- <text v-if="item.distance" class="kmclass">[{{ item.distance }}km]</text> -->
						</view>
						<view class="store-star">
							<image src="/static/star.png"></image>
							<view class="nums">
								4.3 | 已售 100
							</view>
							<text>自营</text>
						</view>
						<view class="address" style="display: flex;font-size: 22rpx;">
							<!-- <image src="/static/images/address.png" style="margin-right: 10rpx;vertical-align: middle;width:30rpx; height: 30rpx;"></image> -->
							{{ item.province_name }}{{ item.city_name }}{{ item.district_name }}{{ item.address }}
							<text style="margin-left: auto;font-size: 22rpx;">{{ item.distance }}km</text>
						</view>
					</view>
				</navigator>
				<view class="loadingicon acea-row row-center-wrapper" v-if="storeList.length > 0"><text class="loading iconfont icon-jiazai" :hidden="loading == false"></text></view>
			</view>
		</view>
		<view class="noCommodity" v-if="storeList.length == 0 && where.page > 1"><view class="pictrue"></view></view>
		<tui-tabbar :current="current" backgroundColor="#FFFFFF" color="#666" selectedColor="#EB0909"></tui-tabbar>
	</view>
</template>

<script>
var app = getApp();
export default {
	data() {
		return {
			orderShow: false,
			distance_name: '',
			order_name: '',
			type_name: '',
			distanceShow: false,
			typeShow: false,
			current: '',
			storecateList: [],
			storeList: [],
			navH: '',
			is_switch: false,
			where: {
				order: '',
				cid: 0,
				keyword: '',
				priceOrder: '',
				salesOrder: '',
				min_distance: 0,
				max_distance: 0,
				news: 0,
				page: 1,
				limit: 10,
				latitude: '',
				longitude: ''
			},
			price: 0,
			stock: 0,
			nows: false,
			loadend: false,
			loading: false,
			bottommenulist: [],
			inputShowed: '',
			host_product: '',
			title: '',
			position: '',
			latitude: '',
			longitude: '',
			cid: ''
		};
	},

	components: {},
	props: {},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function(options) {
		const _this = this; //位置授权
		this.where.cid = options.cid || '';
		this.current = '/' + this.__route__;
		this.get_storecate_list();

		// #ifdef MP-TOUTIAO
		uni.getLocation({
			type: 'wgs84',
			success(res) {
				console.log(res);
				_this.where.latitude = res.latitude;
				_this.where.longitude = res.longitude;
				_this.loadend = false;

				_this.title = options.title || '';
				_this.where.keyword = options.searchValue || '';
				_this.inputShowed = options.inputShowed || '';

				if (!options.inputShowed) {
					_this.get_store_list();
				}
			},
			fail(err) {
				_this.get_store_list();
			}
		});
		// #endif

		// #ifdef MP-WEIXIN
		wx.authorize({
			scope: 'scope.userFuzzyLocation',
			success: res => {
				console.log(res);
				wx.getFuzzyLocation({
					type: 'wgs84',
					success(res) {
						console.log(res);
						_this.where.latitude = res.latitude;
						_this.where.longitude = res.longitude;
						_this.loadend = false;

						_this.title = options.title || '';
						_this.where.keyword = options.searchValue || '';
						_this.inputShowed = options.inputShowed || '';

						if (!options.inputShowed) {
							_this.get_store_list();
						}
					},
					fail(err) {
						_this.get_store_list();
					}
				});
			},
			fail: res => {
				//console.log('失败：', res);
			}
		});
		// #endif
	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function() {},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {
		this.where.page = 1;
		this.loadend = false;
		this.storeList = [];
		this.get_store_list();
		uni.stopPullDownRefresh();
	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {
		this.get_store_list();
	},
	methods: {
		onBoxClose() {
			this.typeShow = false;
			this.distanceShow = false;
			this.orderShow = false;
		},
		onTypeShow() {
			var state = true;
			if (this.typeShow == true) {
				state = false;
			}
			this.onBoxClose();
			this.typeShow = state;
		},
		onOrderShow() {
			var state = true;
			if (this.orderShow == true) {
				state = false;
			}
			this.onBoxClose();
			this.orderShow = state;
		},
		onDistanceShow() {
			var state = true;
			if (this.distanceShow == true) {
				state = false;
			}
			this.onBoxClose();
			this.distanceShow = state;
		},
		doCategory: function(stid, name) {
			this.type_name = name;
			this.where.stid = stid;
			this.loadend = false;
			this.where.page = 1;
			this.onBoxClose();
			this.get_store_list(true);
		},
		doOrder: function(order, name) {
			this.order_name = name;
			this.where.order = order;
			this.loadend = false;
			this.where.page = 1;
			this.onBoxClose();
			this.get_store_list(true);
		},
		doDistance: function(min, max, name) {
			this.distance_name = name;
			this.where.min_distance = min;
			this.where.max_distance = max;
			this.loadend = false;
			this.where.page = 1;
			this.onBoxClose();
			this.get_store_list(true);
		},

		search: function() {
			uni.navigateTo({
				url: '/pages/common/search/search'
			});
		},
		onChangePosition: function(e) {
			const _this = this;
			uni.chooseLocation({
				success(res) {
					_this.position = res.address;
					_this.where.latitude = res.latitude;
					_this.where.longitude = res.longitude;

					_this.loadend = false;
					_this.latitude = res.latitude;
					_this.longitude = res.longitude;
					_this.get_store_list(true);
				}
			});
		},

		Changswitch: function() {
			var that = this;
			that.is_switch = !this.is_switch;
		},
		searchSubmit: function(e) {
			var that = this;
			that.where.keyword = e.detail.value;
			that.where.page = 1;
			that.loadend = false;
			this.get_store_list(true);
		},
		//点击事件处理
		set_where: function(e) {
			var dataset = e.target.dataset;

			this.cid = dataset.cid;
			this.loadend = false;
			this.where.page = 1;

			this.get_store_list(true);
		},
		//设置where条件
		setWhere: function() {
			this.where.salesOrder = 'asc';

			if (this.cid) {
				this.where.cid = this.cid;
			}
		},
		get_storecate_list: function() {
			var that = this;
			that.$request.get('storecate.list').then(res => {
				that.storecateList = res.data;
			});
		},
		//查找店铺
		get_store_list: function(isPage) {
			var that = this;
			// this.setWhere();
			if (that.loadend) return;
			if (that.loading) return;
			if (isPage === true) {
				that.storeList = [];
			}

			console.log(that.where);
			that.$request.post('store.list', that.where).then(res => {
				var storeList = res.data;
				console.log(storeList);
				var loadend = storeList.length < that.where.limit;
				that.where.page = that.where.page + 1;
				that.loadend = loadend;
				that.loading = false;
				that.storeList = storeList;
			});
		}
	}
};
</script>
<style scoped lang="scss">
.filter {
	position: fixed;
	top: 85rpx;
	line-height: 120rpx;
	width: 100%;
}

.filter > view {
	display: flex;
	align-items: center;
}

.filter-item {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	font-size: 28rpx;
}

.filter-item > image {
	width: 20rpx;
	height: 12rpx;
	padding-left: 10rpx;
}

.tui-dropdownlist {
	position: fixed;
	left: 0;
	top: 120rpx;
	z-index: 999;
	background: #fff;
	width: 100%;
}

.tui-middle {
	display: block;
	padding: 20rpx 20rpx;
	border-bottom: 2rpx solid #f2f2f2;
	font-size: 32rpx;
}
page {
	font-size: 28rpx;
	background-color: #f8f7f7;
	color: #333;
}

.container {
	padding-bottom: 228rpx;
	color: #333;
}

.storeList .search {
	width: 100%;
	height: 86rpx;
	padding-left: 23rpx;
	box-sizing: border-box;
	position: fixed;
	display: flex;
	left: 0;
}

.storeList .bg-color {
	background-color: #e41f19;
}

.storeList .search .location {
	color: #fff;
	flex: 1;
	display: flex;
	width: 62rpx;
	font-size: 40rpx;
	height: 86rpx;
	line-height: 86rpx;
	background-image: '../../images/location_fill.png';
}

.storeList .search .input {
	flex: 1;
	display: flex;
	width: 570rpx;
	height: 60rpx;
	background-color: #fff;
	border-radius: 50rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
}

.storeList .search .input input {
	width: 478rpx;
	height: 100%;
	font-size: 26rpx;
}

.storeList .search .input .placeholder {
	color: #999;
}

.storeList .search .input .iconfont {
	font-size: 35rpx;
	color: #555;
}

.storeList .search .icon-pailie,
.storeList .search .icon-tupianpailie {
	color: #fff;
	width: 62rpx;
	font-size: 40rpx;
	height: 86rpx;
	line-height: 86rpx;
}

.navscroll {
	height: 86rpx;
	position: fixed;
	display: flex;
	white-space: nowrap;
	left: 0;
	top: 110rpx;
}

.storeList .nav {
	width: 1000rpx;
	display: flex;
	color: #454545;
	font-size: 28rpx;
	background-color: #fff;
}

.storeList .nav .item {
	text-align: center;
	height: 100%;
	padding: 25rpx;
}

.storeList .nav .item.font-color {
	font-weight: bold;
}

.storeList .nav .item image {
	width: 15rpx;
	height: 19rpx;
	margin-left: 10rpx;
}

.storeList .list {
	padding: 0 20rpx;
	margin-top: 60rpx;
}

.kmclass {
	color: #999;
}

.storeList .list.on {
	/* background-color: #fff;
		border-top: 1px solid #f6f6f6; */
}

.storeList .list .item {
	width: 95%;
	background-color: #fff;
	border-radius: 10rpx;
	margin: 20rpx auto;
	box-shadow: 0rpx 1rpx 13rpx 0rpx rgba(230,228,228,0.35);
	border-radius: 10rpx;
	box-sizing: border-box;
}

.storeList .list .item.on {
	width: 100%;
	display: flex;
	border-bottom: 1rpx solid #f6f6f6;
	padding: 30rpx 32rpx;
}

.storeList .list .item .pictrue {
	width: 100%;
	height: 345rpx;
}

.storeList .list .item .pictrue.on {
	width: 180rpx;
	height: 180rpx;
}

.storeList .list .item .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 10rpx 10rpx 0 0;
}

.storeList .list .item .pictrue image.on {
	border-radius: 6rpx;
}

.storeList .list .item .text {
	padding: 20rpx 17rpx 26rpx 17rpx;
	font-size: 28rpx;
	color: #373333;
}

.storeList .list .item .text.on {
	width: 508rpx;
	padding: 0 0 0 22rpx;
}

.storeList .list .item .text .money {
	font-size: 23rpx;
	margin-top: 8rpx;
}

.storeList .list .item .text .money.on {
	margin-top: 50rpx;
}

.storeList .list .item .text .money .num {
	font-size: 32rpx;
}

.storeList .list .item .text .vip {
	font-size: 22rpx;
	color: #aaa;
	margin-top: 7rpx;
}

.storeList .list .item .text .vip.on {
	margin-top: 12rpx;
}

.storeList .list .item .text .vip .vip-money {
	font-size: 24rpx;
	color: #282828;
	font-weight: bold;
}

.storeList .list .item .text .vip .vip-money image {
	width: 46rpx;
	height: 21rpx;
	margin-left: 4rpx;
}

.noCommodity {
	background-color: #fff;
}

.store-star {
	margin: 20rpx 0;
	display: flex;
	align-items: center;
	image {
		margin-right: 6rpx;
	}
	.nums {
		font-size: 22rpx;
	}
	text {
		margin-left: auto;
		background: #FD7733;
		color: #fff;
		padding: 4rpx 10rpx;
		font-size: 22rpx;
	}
}

.store-star image {
	width: 28rpx;
	height: 28rpx;
}
.tui-searchbox {
	width: 100%;
	height: 92rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

.tui-searchbox::after {
	content: '';
	position: absolute;
	border-bottom: 1rpx solid #d2d2d2;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}

.tui-search-input {
	width: 100%;
	height: 60rpx;
	background: #f1f1f1;
	border-radius: 30rpx;
	font-size: 26rpx;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-search-text {
	padding-left: 16rpx;
}
</style>
